<template>
  账号输入框：<input ref="account" type="text" />
  <!-- ref 字符串值形式 -->
  <button @click="changeAccountInputStyle">改变账号输入框的样式</button>

  <hr />
  密码输入框：<input :ref="passwordRef" type="password" />
  <!-- ref 函数形式：元素渲染后，会立即执行该函数 -->
  <button @click="changePasswordInputStyle">改变密码输入框的样式</button>
</template>

<script>
export default {
  data: () => ({
    accountEl: null,
    passwordEl: null,
  }),
  methods: {
    changeAccountInputStyle() {
      this.accountEl = this.$refs.account // 获取账号输入框的 DOM
      console.log(this.accountEl)
      this.accountEl.style = 'padding: 15px'
      this.accountEl.className = 'rounded'
      this.accountEl.focus()
    },
    passwordRef(el) {
      this.passwordEl = el // el 元素是密码输入框
    },
    changePasswordInputStyle() {
      console.log(this.passwordEl)
      console.log(this.$refs) // 函数式声明的 ref，不会在this.$refs中获取
      this.passwordEl.style = 'padding: 15px'
      this.passwordEl.className = 'rounded'
      this.passwordEl.focus()
    },
  },
}
</script>

<script setup>
import { ref } from 'vue'

// 账号输入框
let account = ref(null) // ref 变量名和账号输入框中的 ref 属性值一样

function changeAccountInputStyle() {
  console.log(account.value)
  account.value.style = 'padding: 10px'
  account.value.className = 'rounded'
  account.value.focus()
}

// ------------------------------------------------------------------------
let passwordEl = ref(null) // 密码输入框元素

function passwordRef(el) {
  passwordEl.value = el // el 元素是密码输入框
}

function changePasswordInputStyle() {
  console.log(passwordEl.value)
  passwordEl.value.style = 'padding: 10px'
  passwordEl.value.className = 'rounded'
  passwordEl.value.focus()
}
</script>

<style scoped>
.rounded {
  border-radius: 15px;
}
</style>
